import React from "react"
import { Table, Divider,Popconfirm,Pagination,Row,Col,Button } from "antd"
import { connect } from 'dva'
// import styles from "../components/styles.less"
import styles from "./details.less"
import YQSelectSearch from '../../components/SelectSearch'
import { routerRedux } from 'dva/router'
import queryString from 'query-string'
import UserModal from '../../components/DetailsModal'

const Details = ({location, dispatch, loading, statecode_details }) => {
//   const { data } = details
//   console.log('data',data)
  // console.log(details)
  console.log(statecode_details)
  const { list: dataSource, pageState ,code } = statecode_details
  
  
  if(dataSource.length>0){
    for(let i=0;i<dataSource.lenght;i++){
      // const arr =[...dataSource[1].sub_codes,...dataSource[0].sub_codes]
      dataSource[1].sub_codes.concat(dataSource[0].sub_codes)
    }
    console.log(dataSource[1].sub_codes)
    
  }
  
  const { page, total } = pageState
  const { query, pathname} = location
//   const OnButtonClick = () => {
//     dispatch({
//       type: 'statecode/listStateCode',
//       payload: { data },
//     })
//   }

  const handleRefresh = (newQuery) => {
    dispatch(routerRedux.push({
      pathname,
      search: queryString.stringify({
        ...query,
        ...newQuery,
      }),
    }))
  }

  const selectFCProps = {
    codeList:code,
    filter: {
      ...query,
    },
    onFilterChange (value) {
      handleRefresh({
        ...value,
        page: 1,
      })
    },
  }
 
  const editHandler = ({ id, values }) => {
    dispatch({
        type: 'statecode_details/patch',
        payload: { id, values },
    })
}
const createHandler = ({ values }) => {
  dispatch({
      type: 'statecode_details/create',
      payload: values,
  })
}
const deleteHandler = ({ id, user_name }) => {
  console.log(id)
  dispatch({
      type: 'statecode_details/remove',
      payload: { id,user_name },
  })
}

  const onChange=(current)=> {
    console.log(current)
  }

  const columns = [
    {
     title: '状态码',
     dataIndex: 'code',
     key: 'code',
   }, {
     title: '状态码说明',
     dataIndex: 'sub_code',
     key: 'sub_code',
   }, {
     title: '明细状态码',
     dataIndex: 'pub_code_id',
     key: 'pub_code_id',
   }, {
     title: '说明',
     dataIndex: 'sub_msg',
     key: 'sub_msg',
   }, {
     title: '解决方案',
     dataIndex: 'solution',
     key: 'solution',
   }, {
     title: '创建者',
     dataIndex: 'creator',
     key: 'creator',
   }, {
     title: '更新者',
     dataIndex: 'updater',
     key: 'updater',
   }, {
     title: '更新时间',
     dataIndex: 'update_time',
     key: 'createTime',
   }, {
     title: '操作',
     key: 'operation',
     width: 100,
     render: (text, record) => {
       return <span>
         <UserModal record={record} onOk={editHandler} codeList={code}><a >修改</a></UserModal>
       <Divider type="vertical" />
       <Popconfirm title="Confirm to delete?" onConfirm={deleteHandler.bind(null, {id: record.pub_sub_id, user_name:record.user_name})}>
           <a href="">删除</a>
         </Popconfirm>
     </span>
     },
   },
 ]

  return (
    <div className={styles.antMineStyle}>
      <div>
        <Row justify="space-between">
          <Col span={8}>
            <div>
              <span style={{ fontSize: "large", color: "#1890ff" }} >|</span>
              <label style={{ fontSize: "larger", alignContent: "center", marginLeft: 10 }}>状态码/明细状态码</label>
            </div>
          </Col>
          <Col span={16}>
          <UserModal record={{}} onOk={createHandler}>
          <Button type="primary" style={{ float: "right" }}>创建明细状态码</Button>
          </UserModal>
          <Button icon="sync" style={{
                float: "right",
                marginRight: 10,
                color: "#666666",
                background: "#EEEEEE",
                border: "1px,solid, #DDDDDD",
                }}>
            </Button>
          </Col>
          </Row>
          <div style={{marginTop:'20px'}}>
          <YQSelectSearch {...selectFCProps}/>
          <Table
            loading={loading}
            bordered
            columns={columns}
            dataSource={dataSource}
            rowKey={record => record.code}
            pagination={false}
           />
           <div style={{float:'right',marginTop:'10px'}}>
           <Pagination onChange={onChange} total={total} current={page} showTotal={() => {return `共${total}条数据 `}} size='small' />
           </div>
           
           </div>
        
      </div>

    </div>
  )
}

function mapStateToProps (state) {
  console.log('aa',state)
  const { statecode_details } = state
  return {
    statecode_details,
    loading: state.loading.models.statecode_details,
  }
}

export default connect(mapStateToProps)(Details)
